<template>
  <div class="change">
    <div class="app-container common-list-page" v-if="show">
      <p style="text-align:center;margin-top:10px;font-size:18px;">修改密码</p>
      <el-form
        :model="resetForm"
        :rules="resetFormRules"
        ref="resetForm"
        status-icon
        label-width="100px"
      >
        <el-form-item label="旧密码：" prop="password">
          <el-input type="text" v-model="resetForm.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="newpwd">
          <el-input type="text" v-model="resetForm.newpwd" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="newpassword1">
          <el-input type="text" v-model="resetForm.newpassword1" auto-complete="off"></el-input>
        </el-form-item>

        <el-button type="primary" style="width:200px;" @click.native.prevent="toAmend">确认修改</el-button>
      </el-form>
    </div>
    <div v-else>
      <div class="success">密码修改成功！</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入新密码"));
      } else if (value.toString().length < 6 || value.toString().length > 18) {
        callback(new Error("密码长度为6-18位"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resetForm.newpwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      show: true,
      resetForm: {
        //传给后台所需要的参数
        newpassword1: "",
        password: "",
        username: "" //此处只是后台需要的字段而已，如果前期有公用cookie里面有获取并且保存过，现在需要另外调用进来，具体的获取方法就看个人了
      },
      resetFormRules: {
        password: [
          { required: true, message: "请输入旧密码", trigger: "blur" }
        ],
        newpwd: [{ required: true, validator: validatePass, trigger: "blur" }],
        newpassword1: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    toAmend() {
      var params = new FormData();
      params.append("memberId", this.$store.state.user.memberId);
      params.append("oldpassword", this.resetForm.password);
      params.append("password", this.resetForm.newpassword1);
      axios
        .post(
          "http://im.wzhwgg.com:8070/wechatwebsite/index/updatePassword.do",
          params
        )
        .then(res => {
          this.show = false;
          setTimeout(() => {
            this.$http.get("/index/logout.do").then(res => {
              if (res.status == 200) {
                this.$router.push("/login");
              }
            });
          }, 1000);
        });
    }
    //这是修改成功后重新返回登陆页的方法，看个人需要自行调整
  }
};
</script>

<style scoped>
.el-form {
  width: 60%;
  margin: 50px auto 0;
  text-align: center;
}
.app-container {
  width: 500px;
  border: solid 1px grey;
  border-radius: 10px;
  height: 360px;
  margin: 150px auto;
}
button {
  margin: 20px 0 0;
}
.success {
  position: absolute;
  width: 300px;
  height: 200px;
  text-align: center;
  border: solid 1px black;
  left: 50%;
  top: 50%;
  font-family: 宋体;
  font-weight: bold;
  border-radius: 10px;
  font-size: 18px;
  transform: translate(-50%, -50%);
  line-height: 200px;
}
</style>
